// 轮播图
var mySwiper = new Swiper('.swiper', {
  loop: true, // 循环模式选项
  autoplay: true, // 自动播放
  speed: 300,
  freeMode: true,
  effect: 'slide',
  // 分页器
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets'
  },
  // 前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})
// 侧边栏
changeStyle();
$(window).scroll(function () { // 当窗口滚动条滚动时触发scroll事件
  changeStyle();
})
// 抽离公共代码，形成函数，方便多次调用
function changeStyle() {
  // 获取滚动条的位置
  let pos = Math.floor($(this).scrollTop()); // $(this)表示当前对象window，scrollTop()获取当前滚动条离顶端的距离，Math.floor()向下取整，let用于定义变量
  // console.log(pos);
  // 如果滚动条在500+及以上，则显示侧边栏，否则则隐藏
  if (pos >= 500) {
    $('aside').css('display', 'block');
  } else {
    $('aside').css('display', 'none');
  }
  // 根据滚动条位置设置侧边栏样式
  if (pos >= 500 && pos < 1070) { // 如果滚动条在[500,1070)区间，则调用函数changePos()
    changePos(0);
  } else if (pos >= 1070 && pos < 1250) { // 否则，如果滚动条在[1070,1250)区间
    changePos(1);
  } else if (pos >= 1250 && pos < 1500) {
    changePos(2);
  } else if (pos >= 1500 && pos < 1750) {
    changePos(3);
  } else if (pos >= 1750 && pos < 1875) {
    changePos(4);
  } else if (pos >= 1875) {
    changePos(5);
  }
}
// 函数封装
function changePos(idx) {
  $('aside li').removeClass('active'); // 移出aside下所有li标签中的active类
  $('aside li').eq(idx).addClass('active'); // 为aside下指定的li标签添加active类
}
// 回到顶端
$('.to-top').click(function () { // 当单击class为to-top的标签时，将执行回调函数
  // $(window).scrollTop(0); // 设置滚动条移动到窗口顶端
  $(window.opera ? 'html' : 'html, body').animate({ // 为所有浏览器添加动画
    scrollTop: 0 // 滚动条滚动到顶部
  }, 1000) // 滚动条滚动的时间，默认单位为ms
})
// 单击li标签，滚动到指定位置
$('aside li').eq(0).click(function () {
  scrollLi(700);
})
$('aside li').eq(1).click(function () {
  scrollLi(1100);
})
$('aside li').eq(2).click(function () {
  scrollLi(1400);
})
$('aside li').eq(3).click(function () {
  scrollLi(1600);
})
$('aside li').eq(4).click(function () {
  scrollLi(1700);
})
$('aside li').eq(5).click(function () {
  scrollLi(100);
})
function scrollLi(pos) {
  $(window.opera ? 'html' : 'html, body').animate({
    scrollTop: pos
  }, 1000)
}